* {
    margin         : 0;
    padding        : 0;
    box-sizing     : border-box;
    font-family    : "Poppins", sans-serif;
    text-decoration: none;
}

h5 {
    align-content: center;
    color        : red;
}

.section {
    position       : relative;
    min-height     : 100vh;
    background     : #34495e;
    display        : flex;
    justify-content: center;
    align-items    : center;
    padding        : 20px;
}

section .container {
    position  : relative;
    width     : 1000px;
    height    : 333px;
    background: #fff;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
    overflow  : hidden;
}

section .container .user {
    position: absolute;
    top     : 0;
    left    : 0;
    width   : 100%;
    height  : 100%;
    display : flex;
}

section .container .user .imgBx {
    position  : relative;
    width     : 50%;
    height    : 100%;
    background: #ff0;
    transition: .5s;
}

section .container .user .imgBx img {
    position  : absolute;
    top       : 0;
    left      : 0;
    width     : 100%;
    height    : 100%;
    object-fit: cover;
}

section .container .user .formBx {
    position       : relative;
    width          : 50%;
    height         : 100%;
    background     : #fff;
    display        : flex;
    justify-content: center;
    align-items    : center;
    padding        : 40px;
    transition     : .5s;
}

section .container .user .formBx form h2 {
    font-size     : 18px;
    font-weight   : 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align    : center;
    width         : 100%;
    margin-bottom : 10px;
    color         : #555;
}

section .container .user .formBx form input {
    position      : relative;
    width         : 100%;
    padding       : 10px;
    background    : #f5f5f5;
    border        : none;
    outline       : none;
    box-shadow    : none;
    margin        : 8px 0;
    letter-spacing: 1px;
    font-size     : 20px;
    font-weight   : 300;
}

section .container .signupBx .formBx form input {
    position      : relative;
    width         : 100%;
    padding       : 10px;
    background    : #fff1ff;
    color         : #76488e;
    border        : none;
    outline       : none;
    box-shadow    : none;
    margin        : 8px 0;
    letter-spacing: 1px;
    font-size     : 20px;
    font-weight   : 300;
    caret-color   : black;
}

section .container .signupBx .formBx form .signup a {
    color: #76488e;
}

section .container .signupBx .formBx form .signup {
    font-weight: 600;
    font-size  : 15px;
}

section .container .user .formBx form input[type="submit"] {
    max-width     : 100px;
    background    : #677eff;
    color         : #fff;
    cursor        : pointer;
    font-size     : 14px;
    font-weight   : 600;
    letter-spacing: 1px;
    transition    : 0.5s;
}

section .container .signupBx .formBx form input[type="submit"] {
    max-width     : 100px;
    background    : #d799ff;
    color         : #ffeeb7;
    cursor        : pointer;
    font-size     : 14px;
    font-weight   : 600;
    letter-spacing: 1px;
    transition    : 0.5s;
}

section .container .user .formBx form .register {
    position      : relative;
    margin-top    : 20px;
    font-size     : 12px;
    letter-spacing: 1px;
    color         : #555;
    font-weight   : 300;
}

section .container .user .formBx form .register a {
    color: #677eff
}

section .container .user .formBx form .register {
    font-size  : 15px;
    font-weight: 600;
    color      : #000000;
}

section .container .signupBx {
    pointer-events: none;
}

section .container.active .signupBx {
    pointer-events: initial;
}

section .container.active .signupBx {
    background-color: #ffeeb7;
}

section .container .signupBx .formBx {
    left: 100%;
}

section .container.active .signupBx .formBx {
    left: 0;
}

section .container .signupBx .imgBx {
    left: -100%;
}

section .container.active .signupBx .imgBx {
    left: 0;
}